<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
    <script src="http://139.196.124.38:8084/js/echarts.min.js"></script>
    <script src="http://139.196.124.38:8084/js/echarts-gl.js"></script>
</head>
<body>
    <h1>HAHA</h1>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1800px;height:1200px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //http://localhost:8084/data/life-expectancy-table.json
        // http://localhost:8084/data/a.json
        // http://139.196.124.38:8084/root/subway/data/a.json
        $.get('http://139.196.124.38:8084/selectAll', function (data) {
            console.log(data);
            option = {
                grid3D: {},
                tooltip: {},
                // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。
                xAxis3D: {
                    type: 'category'
                },
                yAxis3D: {
                    type: 'category'
                },
                zAxis3D: {},
                visualMap: {
                    calculable: true,
                    max: 100,
                    dimension: 'value',
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                dataset: {
                    dimensions: [
                        'value',
                        'type',
                        'datetime'
                        // {name: 'Year', type: 'ordinal'}
                    ],
                    source: data
                },
                series: [
                    {
                        type: 'bar3D',
                        // symbolSize: symbolSize,
                        shading: 'lambert',
                        // 维度的名字默认就是表头的属性名
                        encode: {
                            x: 'datetime',
                            y: 'type',
                            z: 'value',
                            tooltip: [0, 1, 2, 3, 4]
                        },
                        /*// 普通样式
                        itemStyle: {
                            // 点的颜色。
                            color: '#FF4500'
                        },
                        // 高亮样式
                        emphasis: {
                            itemStyle: {
                                // 高亮时点的颜色。
                                color: '#FF3030'
                            },
                            label: {
                                show: true,
                                // 高亮时标签的文字。
                                formatter: '3D柱状图'
                            }
                        }*/
                    }
                ]
            };
            myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
        });

    </script>
</body>
</html>